//---------------------------
// Photo Card
//---------------------------

.photo-card {
    margin-bottom: $line-height__small;
    padding-bottom: $line-height__small;
  
    border-bottom: 1px solid $border-color;
    text-align: center;
  
    &__image {
      margin-bottom: half($line-height__base);
      transition: $base-transition-speed;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

      @media #{$medium-down} {
        margin-bottom: half($line-height__small);
      }
    }
  
    &__title {
      line-height: $line-height__small;
      margin-top: 0;
      margin-bottom: 0;
  
      a {
        display: block;
        border-bottom: none;
        transition: $base-transition-speed;
  
        &:hover { color: #a60505; }
      }
    }
  
    &__meta {
      margin-bottom: quarter($line-height__base);
      font-size: $font-size__tiny;
      line-height: $line-height__small;
      color: $color__base--hover;
  
      a { color: $color__base--hover; text-decoration: none; }
    }
  
    &:hover {
      .photo-card__image {
        opacity: 0.9;
      }
  
      .photo-card__title a { color: #a60505; }
    }
  
    &--featured {
      &__icon {
        position: absolute;
        bottom: quarter($line-height__base);
        left: quarter($line-height__base);
        fill: #fff;
      }
    }
  
    @media #{$large-up} {
      margin-bottom: $line-height__base;
      padding-bottom: $line-height__base;
    }
  }
  
  // Make photo cards the same height
  
  .photo-list {
    display: flex;
    flex-wrap: wrap;
  
    // Safari (iPad)
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
  
    .photo-card-wrap {
      display: flex;
  
      // Safari (iPad)
      display: -webkit-flex;
    }
  
    .photo-card {
      width: 100%;
    }
  }

  .photo-row {
    margin: 0 auto;
    max-width: $row-max-width;
  
    @media #{$medium-up} {
      padding-left: half($line-height__small);
      padding-right: half($line-height__small);
    }
  
    @media #{$large-up} {
      padding-left: half($line-height__base);
      padding-right: half($line-height__base);
    }
  
    &:before,
    &:after {
      display: table;
      clear: both;
      content: " ";
    }
  
    .photo-row {
      padding: 0;
  
      @media #{$medium-up} {
        margin-right: - half($line-height__small);
        margin-left:  - half($line-height__small);
      }
  
      @media #{$large-up} {
        margin-right: - half($line-height__base);
        margin-left:  - half($line-height__base);
      }
    }
  
    @media #{$large-up} {
      padding-left: half($line-height__base);
      padding-right: half($line-height__base);
    }
  
    &--full {
      max-width: 90%;
    }
  }


.photo-wrapper {
  padding: $line-height__small 0;

  @media #{$large-up} {
    padding: $line-height__base 0;
  }
}